<template>
  <li :style="style">
    <p class="wid97" @click="scrollTo(item.i)">
      <span class="txt h2-txt" :class="color" v-text="item.title" :title="item.title"></span>
    </p>
    <ul class="catalog-panel ml40" v-if="item.children && item.children.length">
      <sub-tree v-for="(item, index) in item.children" :item="item" :key="index"></sub-tree>
    </ul>
  </li>
</template>
<script>
  import { findIndex, Observer } from '../../core/util'
  import { mapState, mapGetters, mapActions } from 'vuex'
  export default {
    name: 'SubTree',
    props: {
      item: Object
    },
    computed: {
      ...mapState(['curIndex']),
      style() {
        return {
          'margin-left': 30 * this.item.extensionLine + 'px'
        }
      },
      color() {
        if(this.item.i === this.curIndex) return 'color-2f';
      }
    },
    methods: {
      ...mapActions(['scrollTo'])
    }
  }
</script>